<template>
    <!-- 没有歌曲就隐藏 -->
  <div class="footgedan" v-show="isShow">
    <!-- 判断是否显示有歌曲播放 -->
    <div class="isbofang" v-if="store._state.data.playList[0].name=='暂无歌曲播放'">
        <div>{{ store._state.data.playList[0].name }}</div>
    </div>
   <!-- 有歌曲就走下面的代码 -->
    <div v-else class="cent"> 
        <!-- 左边 -->
        <div class="left" @click="showPopup">
            <img :src="store._state.data.playList[store._state.data.playListIndex].al.picUrl" alt="">
            <div>
                <p>{{store._state.data.playList[store._state.data.playListIndex].name}}</p>
                <span v-if="store._state.data.playList[0].name=='暂无歌曲播放'">横滑切换歌曲</span>
            </div>
        </div>
             <!-- 右边 -->
        <div class="right">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-prev"></use>
            </svg>
            <!-- 暂停 -->
            <svg v-if="store._state.data.isbtnShow" class="icon" aria-hidden="true" @click="play">
                <use xlink:href="#icon-bofang-copy"></use>
            </svg>
            <!-- 播放 -->
            <svg v-else class="icon" aria-hidden="true" @click="play">
                <use xlink:href="#icon-bofangzhong"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-next"></use>
            </svg>
            <!-- 列表 -->
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-liebiao2"></use>
            </svg>
        </div>
        
        <audio ref="audio" :src=" `https://music.163.com/song/media/outer/url?id=${store._state.data.playList[store._state.data.playListIndex].id}.mp3` "></audio>
    </div>
   
    <van-popup v-model:show="show" position="bottom" :style="{ width: '100%' ,height:'100%'}">
        <!-- 每一首歌 -->
        <Lyrics :Lyrics="store._state.data.playList[store._state.data.playListIndex]"></Lyrics>
    </van-popup>
  </div>
</template>

<script setup>
    import Lyrics from '@/components/details/Lyrics.vue'
    import { useStore } from "vuex";
    import { ref ,nextTick ,watch  } from "vue";
    const store = useStore();
    // console.log(store);
    const isShow = ref(false)
    const show = ref(false)
    const audio = ref()
    nextTick(()=>{
        //  console.log(audio);
        })
        const showPopup = () => {
            show.value = true;
        };
        
    const play =()=>{
        // 控制音乐播放
        if (audio.value.paused) {
            audio.value.play()
            store._state.data.isbtnShow = false
        console.log(audio.value.autoplay);
        }else{
            audio.value.pause()
            store._state.data.isbtnShow = true
        }
        
    };
    // 监听id是否变化，判断是否切歌
    watch(()=> store._state.data.playList[store._state.data.playListIndex].id,()=>{
        audio.value.autoplay = true;
          // 控制音乐播放
          if (audio.value.paused) {
            audio.value.play()
            store._state.data.isbtnShow = false
        }
    });
    // 当列表发生变化时，让底部播放组件出现
    watch(()=> store._state.data.playList,()=>{
        if (audio.value.played) {
             isShow.value = true
        }
       
    })
</script>



<style lang="scss" scoped>
.footgedan {
  width: 100%;
  height: 1.4rem;
  background: #fff;
  border-top: 1px solid #999;
  position: fixed;
  bottom: 0;
  padding: .2rem;
  .cent{
    display: flex;
    justify-content: space-between;
    .left{
        height: 100%;
        width: 60%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        img{
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
        }
      }
    .right{
        width: 35%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: .24rem;
    }
  }
  
}
</style>
